<template>
  <el-dialog
    v-model="visible"
    title="上传视频"
    width="600"
    draggable
    @close="close"
    :z-index="2000"
  >
    <div>
      <div class="flex justify-between uploadBox">
        <VUpload :limit="999" :validator="validator" type="video" @success="success">
          <el-button type="primary" link class="flex items-center">
            <svg-icon icon-class="Plus"></svg-icon>
            上传视频
          </el-button>
        </VUpload>
      </div>
      <div class="border mt-2 flex flex-wrap pt-4 pl-4" v-if="fileList.length">
        <div class="w-28 mr-4 mb-4" v-for="(item, index) in fileList" :key="item.url">
          <div class="bg-gray-300 mb-2 relative w-28 h-28">
            <svg-icon
              icon-class="state_fail_cover"
              class="absolute -right-1.5 -top-1.5 text-base text-white z-10"
              @click="handleRemove(index)"
            />
            <!-- <VImage :src="item.image_link" :width=112 :height=112></VImage> -->
            <video
              :src="item.image_link"
              controls="controls"
              style="width: 112px; height: 112px"
            >
              您的浏览器不支持 video 标签。
            </video>
          </div>
          <div class="line1">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VideoUpload">
import VImage from "@/components/Image/index.vue";
import VUpload from "@/components/VUpload/index.vue";
import { uploadImg } from "@/api/index.js";
import { ref, watch } from "vue";
const props = defineProps({
  customTag: {
    type: String,
    default: () => "",
  },
});
const emit = defineEmits(["uploadFile"]);
let options = reactive(inject("options"));
const source = ref(1);
const imageType = ref(0);
const loading = ref(false);
const visible = ref(null);
const upload = ref(null);
const uploadList = ref([]);
const open = (type) => {
  visible.value = true;
  imageType.value = type;
};
const fileList = ref([]);
const handleRemove = (index) => {
  fileList.value.splice(index, 1);
};
// 选取图片读取尺寸
const uploadAvatar = (file) => {
  let reader = new FileReader();
  reader.onload = function (e) {
    let data = e.target.result;
    // 加载图片获取图片真实宽度和高度
    let image = new Image();
    image.src = data;
    image.onload = () => {
      file.file.width = image.width;
      file.file.height = image.height;
    };
  };
  reader.readAsDataURL(file.file);
};
const close = () => {
  visible.value = false;
};
// 上传校验
const validator = (fileInfo) => {
  return (() => {})();
};
const success = (obj) => {
  fileList.value.push({
    image_name: obj.filename,
    image_link: obj["data-show-file"],
    image_source: source.value,
    image_type: null,
    custom_tag: props.customTag,
    image_for: "",
    usage_status: 1,
    image_size: `${obj.width} * ${obj.height}`,
  });
};
const save = () => {
  emit("uploadFile", fileList.value, imageType.value);
  close();
};
defineExpose({ open });
</script>
<style lang="scss" scoped>
.uploadBox {
  height: 52px;
  border-radius: 4px;
  border: 1px dashed #3366f1;
  justify-content: center;
  align-items: center;
  .v-upload {
    width: 100%;
    height: 100%;
    :deep(.el-upload) {
      width: 100%;
      height: 52px;
    }
  }
}
.typeList {
  display: flex;
  justify-content: space-between;
}
.imageClass {
  border-radius: 4px;
  border: 1px solid #e6e7e9;
  flex: auto;
  margin: 16px 8px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.active {
  background: rgba(51, 102, 241, 0.06);
  border: 1px solid #3366f1;
}
.activeIcon {
  background: #3366f1;
  display: flex;
  justify-content: center;
  align-items: center;
  .icon {
    position: absolute;
    color: #fff;
    display: inline-block;
    margin: auto;
  }
}
.upload-demo {
  :deep(.el-upload--picture) {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  :deep(.el-upload-list) {
    // display: none;
  }
}
</style>
